<template>
  <!-- 内容区域 -->
  <div class="deviceAssignmentsDetails">
    <div class="add_btn_top">
      <el-button icon="el-icon-close" size="mini" @click="closePage"
        >关闭</el-button
      >
    </div>
    <div class="details_box">
      <img
        class="img_box"
        :src="assignmentsData.device.deviceType.imageUrl | filtersFileUrl()"
      />
      <div class="conte" style="padding-left: 52px; width: 46%">
        <div class="item">
          <span>Token: </span>
          <div class="tip">
            <div class="token_title">{{ assignmentsData.token }}</div>
            <el-tooltip effect="light" content="复制" placement="right">
              <svg-icon
                class="tag-read"
                icon-class="copy"
                @click="Copytext"
                :data-clipboard-text="assignmentsData.token"
                style="margin-left: 5px; cursor: pointer"
              />
            </el-tooltip>
          </div>
        </div>
        <div class="item" style="margin: 19px 0">
          <span> 设备类型： </span>
          <el-link
            type="primary"
            :underline="false"
            @click="
              todevicesTypedetails(assignmentsData.device.deviceType.token)
            "
            ><u>{{ assignmentsData.device.deviceType.name }}</u>
            <el-tooltip
              class="item"
              effect="light"
              content="打开设备类型"
              placement="right-end"
            >
              <svg-icon class="icon" icon-class="select" />
            </el-tooltip>
          </el-link>
        </div>
        <div class="item" style="align-items: baseline">
          <span> 状态： </span>
          <el-select
            :class="setClass(status)"
            v-model="status"
            size="small"
            style="width: 100px"
            icon="el-icon-search"
            @change="statusChange"
          >
            <el-option
              v-for="item in activeStatus"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
              <span style="float: left">
                <svg-icon :icon-class="formatIclass(item.key)" />
              </span>
              <span style="float: right; font-size: 13px; margin-right: 10px">{{
                item.value
              }}</span>
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="conte">
        <div class="item">
          <span> 创建时间: </span>
          <div class="description">
            {{ assignmentsData.createdDate | formatDate }}
          </div>
        </div>
        <div class="item" style="margin: 19px 0">
          <span> 更新时间: </span>
          <div class="description">
            {{ assignmentsData.updatedDate | formatDate }}
          </div>
        </div>
        <div class="item" style="margin-bottom: 19px">
          <span> 生效时间: </span>
          <div class="description">
            {{ assignmentsData.activeDate | formatDate }}
          </div>
        </div>
        <div class="item">
          <span> 发布时间: </span>
          <div class="description">
            {{ assignmentsData.releasedDate | formatDate }}
          </div>
        </div>
      </div>
    </div>

    <div class="details_bottom">
      <div class="">
        <el-tabs v-model="activeName" @tab-click="tabChange">
          <el-tab-pane label="位置" name="tab_1" class="tabPaneHeight">
            <location :locationList="locationList"></location>
          </el-tab-pane>
          <el-tab-pane label="测量" name="tab_2" class="tabPaneHeight">
            <measurement
              v-if="activeName == 'tab_2'"
              :measurementList="measurementList"
            ></measurement>
          </el-tab-pane>
          <el-tab-pane label="警告" name="tab_3" class="tabPaneHeight">
            <warning
              v-if="activeName == 'tab_3'"
              :warningList="warningList"
            ></warning>
          </el-tab-pane>
          <el-tab-pane label="命令调用" name="tab_4" class="tabPaneHeight">
            <commandInvocation
              v-if="activeName == 'tab_4'"
              :commandInvocationList="commandInvocationList"
            ></commandInvocation>
          </el-tab-pane>
          <el-tab-pane label="命令响应" name="tab_5" class="tabPaneHeight">
            <commandResponse
              v-if="activeName == 'tab_5'"
              :commandResponseList="commandResponseList"
            ></commandResponse>
          </el-tab-pane>
        </el-tabs>
        <Pagination
          @pagination="pagination"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :pageSizes.sync="pageSizes"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { formatIclass } from "@/views/common/js/device/assignments.js";
import textCopy from "../../common/textCopy.js";
import { closeTab } from "../../common/js/tab-comm.js";
import { formatTime } from "@/views/common/js/utils.js";
import Pagination from "@/views/common/page";
import location from "./location";
import measurement from "./measurement";
import warning from "./warning";
import commandInvocation from "./commandInvocation";
import commandResponse from "./commandResponse";
import {
  activationAssignments,
  releaseAssignments,
  getAssignmentsDetails,
} from "@/api/assignments";
export default {
  components: {
    Pagination,
    location,
    measurement,
    warning,
    commandInvocation,
    commandResponse,
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      activeName: "tab_1",
      assignmentsToken: this.$route.query.assignmentsToken,
      assignmentsData: {
        device: {
          deviceType: "",
        },
      },
      activeStatus: [
        { key: "Active", value: "激活" },
        { key: "Released", value: "释放" },
        // { key: "Missing", value: "缺失" },
      ],
      status: "",
      locationList: [],
      measurementList: [],
      warningList: [],
      commandInvocationList: [],
      commandResponseList: [],
    };
  },
  mounted() {
    this.getAssignmentsByToken();
    this.getAssignmentLinkedData();
  },
  methods: {
    formatDateT(date) {
      return formatTime(date);
    },
    formatIclass(status) {
      return formatIclass(status);
    },
    //设置分配状态图标
    setClass(status) {
      if (status === "Active") {
        return "selsectbox active";
      } else if (status === "Missing") {
        return "selsectbox missing";
      } else {
        return "selsectbox release2";
      }
    },
    // 复制
    Copytext() {
      textCopy.copy();
    },
    mouseOver() {
      this.qrCodeShow = true;
    },
    mouseLeave() {
      this.qrCodeShow = false;
    },
    //跳转到设备类型详情
    todevicesTypedetails(deviceTypetoken) {
      if (this.$store.getters["user/isNavTo"](5)) {
        this.$router.push({
          path: "/devicetypedetails",
          query: { deviceTypeToken: deviceTypetoken },
        });
      } else {
        this.$msg("您没有相关权限");
      }
    },
    // 获取设备详情
    getAssignmentsByToken() {
      var param = {
        includeArea: false,
        includeAsset: false,
        includeCustomer: false,
        includeDevice: true,
      };
      getAssignmentsDetails(param, this.assignmentsToken).then((res) => {
        const { data } = res;
        this.assignmentsData = data;
        this.status = this.assignmentsData.status;
      });
    },
    //更新分配状态
    statusChange() {
      this.$confirm("是否确认要更新分配状态?", "更新分配状态", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        lockScroll: false,
      })
        .then(() => {
          if (this.status == "Active") {
            //激活
            var param = { status: "Active" };
            activationAssignments(param, this.assignmentsToken).then((res) => {
              this.$msg({
                type: "success",
                message: "分配状态更新成功!",
              });
              this.getAssignmentsByToken();
            });
          } else {
            //释放,缺失
            var urlParam = "";
            if (this.status == "Missing") {
              urlParam = "/missing";
            } else {
              urlParam = "/end";
            }
            releaseAssignments(this.assignmentsToken, urlParam).then((res) => {
              this.$msg({
                type: "success",
                message: "分配状态更新成功!",
              });
              this.getAssignmentsByToken();
            });
          }
        })
        .catch(() => {
          this.status = this.assignmentsData.status;
        });
    },
    //关闭tab页
    closePage() {
      closeTab(this.$route.fullPath, "deviceAssignments");
    },
    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.$nextTick(() => {
        this.getAssignmentLinkedData();
      });
    },
    //tab页切换
    tabChange(tab) {
      this.pageNum = 1;
      this.getAssignmentLinkedData();
    },
    //获取分配历史
    getAssignmentLinkedData() {
      this.loading = true;
      var params = {
        page: this.pageNum,
        pageSize: this.pageSize,
      };
      var urldata = "";
      if (this.activeName == "tab_1") {
        urldata = "/locations";
      } else if (this.activeName == "tab_2") {
        urldata = "/measurements";
      } else if (this.activeName == "tab_3") {
        urldata = "/alerts";
      } else if (this.activeName == "tab_4") {
        urldata = "/invocations";
      } else if (this.activeName == "tab_5") {
        urldata = "/responses";
      }
      getAssignmentsDetails(params, this.assignmentsToken + urldata).then(
        (res) => {
          this.total = res.data.numResults;
          if (this.activeName == "tab_1") {
            this.locationList = res.data.results;
          } else if (this.activeName == "tab_2") {
            this.measurementList = res.data.results;
          } else if (this.activeName == "tab_3") {
            this.warningList = res.data.results;
          } else if (this.activeName == "tab_4") {
            this.commandInvocationList = res.data.results || [];
          } else if (this.activeName == "tab_5") {
            this.commandResponseList = res.data.results || [];
          }
          this.loading = false;
        }
      );
    },
  },
};
</script>

<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
.details_box {
  /deep/ .el-link--inner {
    display: flex;
  }
  padding: 24px;
  background-color: #fff;
  display: flex;
  /* align-items: center; */

  /* justify-content: space-between; */
  border-radius: 4px;
  .conte {
    margin-top: 40px;
    .item {
      display: flex;
      align-items: center;
      .token_title {
        width: auto;
        color: #666666;
        font-size: 14px;
        font-weight: 400;
      }
      .tip {
        display: flex;
        align-items: center;
      }
      span {
        margin-right: 10px;
        color: #333333;
        font-size: 14px;
        font-weight: 400;
        white-space: nowrap;
      }
      .description {
        color: #666666;
        font-size: 14px;
        font-weight: 400;
        @include textoverflow(3);
        width: 336px;
        line-height: 22px;
      }
    }
  }
  .img_box {
    width: 207px;
    height: 207px;
    min-width: 207px;
    min-height: 207px;
    transition: all 0.6s;
    cursor: pointer;
    &:hover {
      transform: scale(1.1);
    }
  }
}
.details_bottom {
  background-color: #fff;
  margin-top: 10px;
  /deep/ .el-tabs__header {
    margin-bottom: 0;
  }
  /deep/ .el-tabs__nav-wrap {
    padding-left: 20px;
  }
}
.deviceAssignmentsDetails /deep/ .el-button--primary {
  background-color: #2680d2;
  border-color: #2680d2;
}

.icon {
  margin-left: 16px;
}

/deep/ .active .el-input__inner {
  background: url(../../../assets/images/comm/active.png) no-repeat center
    center;
  background-size: 15px 15px;
  background-position: 6px;
  padding: 0 0 0 31px;
  font-size: 14px;
}
/deep/ .missing .el-input__inner {
  background: url(../../../assets/images/comm/missing.png) no-repeat center
    center;
  background-size: 15px 15px;
  background-position: 6px;
  padding: 0 0 0 31px;
  font-size: 14px;
}
/deep/ .release2 .el-input__inner {
  background: url(../../../assets/images/comm/release.png) no-repeat center
    center;
  background-size: 15px 15px;
  background-position: 6px;
  padding: 0 0 0 31px;
  font-size: 14px;
}
</style>
